<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    /* General body styling */
    body { 
      font-family: Arial, sans-serif; 
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: #eef2f5;
      color: #333;
    }

    /* Container for form and result */
    .container {
      width: 100%;
      max-width: 500px;
      padding: 20px;
      border-radius: 10px;
      background-color: #ffffff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    /* Title */
    h1 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    /* Result box */
    #result { 
      margin: 15px 0 25px; 
      padding: 15px; 
      border-radius: 8px; 
      background-color: #f8f9fa; 
      border: 1px solid #d1d9e6;
      font-size: 15px;
      min-height: 40px; 
      color: #555; 
    }

    /* Form labels and inputs */
    label {
      font-size: 14px;
      color: #666;
      margin-top: 10px;
      text-align: left;
      display: block;
      margin-bottom: 5px;
    }

    select, input[type="text"], textarea, input[type="date"] {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border: 1px solid #d1d9e6;
      border-radius: 5px;
      font-size: 15px;
      color: #333;
      background-color: #f5f7f9;
      transition: border-color 0.3s ease;
    }
    select:focus, input[type="text"]:focus, textarea:focus, input[type="date"]:focus {
      border-color: #5a9ec9;
      outline: none;
    }

    /* Buttons */
    .button-group {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
    }
    input[type="submit"], button {
      padding: 15px 20px;
      font-size: 18px;
      font-weight: bold;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
      min-width: 100px;
    }
    input[type="submit"] {
      background-color: #4CAF50; 
      color: #fff;
    }
    button {
      background-color: #007bff;
      color: #fff;
    }
    input[type="submit"]:hover {
      background-color: #43a047;
    }
    button:hover {
      background-color: #0069d9;
    }
    input[type="submit"]:active, button:active {
      transform: scale(0.98);
    }

    /* Copy notification */
    .copy-notification {
      display: none;
      color: #28a745;
      font-size: 14px;
      margin-top: 10px;
    }

    /* Result highlight */
    #result.highlight {
      background-color: #fffbcc;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>MEMO FOR STATEMENTS AND REPRINTS</h1>
    <div id="result">Your memo will appear here.</div>

    <form id="sentenceForm">
      <label for="templateSelect">Choose a memo type:</label>
      <select id="templateSelect" required onchange="updateFormFields()">
        <option value="">Select a memo</option>
        <option value="statement">Statement</option>
        <option value="reprint">Reprint</option>
        <optgroup label="Letters">
          <option value="balanceConfirmation">Balance Confirmation</option>
          <option value="paymentReceived">Payment Received</option>
          <option value="creditReference">Credit Reference</option>
          <option value="amConfirm">AM Confirm</option>
          <option value="amRemove">AM Remove</option>
          <option value="auConfirm">AU Confirm</option>
          <option value="auRemove">AU Remove</option>
          <option value="estimatedPayoff">Estimated Payoff</option>
        </optgroup>
      </select>

      <div id="dynamicFields">
        <!-- Placeholder for dynamically updated fields -->
      </div>

      <div id="emailInputContainer">
        <label for="emailInput" id="emailInputLabel">Email:</label>
        <input type="text" id="emailInput" placeholder="Enter email content" required>
      </div>

      <div class="button-group">
        <input type="submit" value="Submit">
        <button type="button" onclick="clearFields()">Clear</button>
        <button type="button" onclick="copyToClipboard()">Copy</button>
      </div>
      <div class="copy-notification" id="copyNotification">Copied to clipboard!</div>
    </form>
  </div>

  <script>
    // Trigger the update on page load if a template is already selected
    window.onload = function() {
      updateFormFields();  // Initialize fields based on current selection
    };

    function updateFormFields() {
      const template = document.getElementById('templateSelect').value;
      const dynamicFields = document.getElementById('dynamicFields');
      const emailInputContainer = document.getElementById('emailInputContainer');
      dynamicFields.innerHTML = ''; // Clear previous fields

      if (template === 'statement' || template === 'reprint') {
        const label = document.createElement('label');
        label.innerText = template === 'statement' ? 'Dates:' : 'Letter ID:';
        label.setAttribute('for', 'emailRecipient');

        const input = document.createElement(template === 'reprint' ? 'textarea' : 'input');
        input.id = 'emailRecipient';
        input.placeholder = template === 'reprint' ? 'Enter detailed letter ID' : 'Enter the date';
        input.required = true;
        if (template !== 'reprint') input.type = 'text';

        dynamicFields.appendChild(label);
        dynamicFields.appendChild(input);
        emailInputContainer.style.display = 'block';
      } else if (template === 'estimatedPayoff') {
        const label = document.createElement('label');
        label.innerText = 'Date or Information of Payoff:';
        label.setAttribute('for', 'payoffDate');

        const input = document.createElement('input');
        input.id = 'payoffDate';
        input.type = 'text';  // Use text input for any date or string
        input.placeholder = 'Enter date or information (e.g., MM/DD/YYYY or N/A)';
        input.required = true;

        dynamicFields.appendChild(label);
        dynamicFields.appendChild(input);

        // Hide email input container and make sure it's not required for 'estimatedPayoff'
        emailInputContainer.style.display = 'none';
      } else {
        emailInputContainer.style.display = 'none'; // Hide email input for other types
      }

      // Automatically update the result when a template is selected
      const emailRecipient = document.getElementById('emailRecipient')?.value || '';
      const emailInput = document.getElementById('emailInput')?.value || '';
      const payoffDate = document.getElementById('payoffDate')?.value || '';
      updateMemo(template, emailRecipient, emailInput, payoffDate);
    }

    // Function to update the memo displayed based on template selection
    function updateMemo(template, emailRecipient, senderName, payoffDate) {
      google.script.run.withSuccessHandler(function(completedSentence) {
        document.getElementById('result').innerText = completedSentence;
      }).completeSentence(template, emailRecipient, senderName, payoffDate);
    }

    document.getElementById('sentenceForm').onsubmit = function(e) {
      e.preventDefault();
      const template = document.getElementById('templateSelect').value;
      const emailRecipient = document.getElementById('emailRecipient')?.value || '';
      const emailInput = document.getElementById('emailInput')?.value || '';
      const payoffDate = document.getElementById('payoffDate')?.value || '';
      updateMemo(template, emailRecipient, emailInput, payoffDate);
    };

    function clearFields() {
      document.getElementById('templateSelect').value = '';
      updateFormFields();
      document.getElementById('result').innerText = 'Your completed sentence will appear here.';
      document.getElementById('result').classList.remove('highlight');
      document.getElementById('copyNotification').style.display = 'none';
      document.getElementById('emailInput').value = '';
    }

    function copyToClipboard() {
      const resultText = document.getElementById('result').innerText;
      navigator.clipboard.writeText(resultText).then(() => {
        document.getElementById('copyNotification').style.display = 'block';
      });
    }
  </script>
</body>
</html>
